<template>
  <a-row :gutter="4" type="flex" class="layout-row">
    <a-col class="layout-col left-col" :class="[collapse?'left-hide':'']" :style="{width:leftColWidth}">
      <a-card :title="leftTitle" style="height: 100%" :body-style="{ height: globalCardHeight, overflow:'hidden' }">
        <template #extra>
          <slot name="leftExtra"></slot>
        </template>
        <slot name="leftContent"></slot>
      </a-card>
      <div class="resize-bar" @mousedown="onMouseDown"/>
    </a-col>
    <a-col class="layout-col right-col">
      <a-card style="height: 100%" :body-style="{ height: globalCardHeight, overflow: 'hidden auto' }">
        <template #title>
          <MenuUnfoldOutlined v-show="collapse" :class="['switch-icon']" title="切换缩进" @click="onAction"/>
          <MenuFoldOutlined v-show="!collapse" :class="['switch-icon']" title="切换缩进" @click="onAction"/>
          <span style="margin-left: 20px">{{ rightTitle }}</span>
        </template>
        <template #extra>
          <slot name="rightExtra"></slot>
        </template>
        <slot name="rightContent"></slot>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import {onMounted, reactive, ref} from 'vue';
import {MenuUnfoldOutlined, MenuFoldOutlined} from '@ant-design/icons-vue';

export default {
  name: 'SagDrawer',
  components:{MenuUnfoldOutlined, MenuFoldOutlined},
  props:{
    leftWidth: {
      type: String,
      default: '250px'
    },
    leftTitle:{
      type: String,
      default: ''
    },
    rightTitle:{
      type: String,
      default: ''
    }
  },
  setup(props, context) {

    const collapse = ref(false);

    const globalCardHeight = ref('calc( 100% - 55px )');
    const onAction = ()=>{
      collapse.value = !collapse.value;
    }
    
    const leftColWidth = ref(props.leftWidth);
        
    const ace = reactive({
      resizeBar: null,
      leftCol: null,
      rightCol: null,
      currentLeftColWidth: null,
      startX: null // 鼠标按下时的位置
    });
    
    const onMouseDown = (e) => {
      ace.resizeBar = e.target;
      ace.leftCol = e.target.parentNode;
      ace.rightCol = getNextElement(e.target.parentNode);
      ace.currentLeftColWidth = ace.leftCol.clientWidth;
      ace.startX = e.clientX;
      // console.log('leftClientWidth:' + ace.leftCol.clientWidth, 'rightClientWidth:' + ace.rightCol.clientWidth, 'startX:' + ace.startX);
      ace.leftCol.style.userSelect = 'none';
      ace.rightCol.style.userSelect = 'none';
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };
    
    const onMouseMove = (e) => {
      const moveLength = e.clientX - ace.startX;
      const aceLeftWidth = ace.currentLeftColWidth + moveLength;
      if (aceLeftWidth <= 200) {
        return;
      }
      leftColWidth.value = aceLeftWidth + 'px';
    };
    
    const onMouseUp = () => {
      document.removeEventListener('mousedown', onMouseDown);
      document.removeEventListener('mousemove', onMouseMove);
    };

    /**
     * 获取下一个兄弟元素的兼容函数
     * @param element
     * @returns {*|((node: RendererNode) => (RendererNode | null))|Node|ChildNode|(() => (Node | null))|ActiveX.IXMLDOMNode}
     */
    const getNextElement = (element) => {
      if (element.nextElementSibling) {
        return element.nextElementSibling;
      } else {
        let next = element.nextSibling; // 下一个兄弟节点
        while (next && next.nodeType !== 1) { // 有 并且 不是我想要的
          next = next.nextSibling;
        }
        return next;
      }
    }
    
    onMounted(() => {
      
    });

    return {
      leftColWidth,
      globalCardHeight,
      collapse,
      onAction,

      onMouseDown,
      onMouseMove,
      onMouseUp
    };
  },
};
</script>

<style scoped >
.layout-row {
  height: 100%;
  align-items: stretch;
  flex-wrap: nowrap;
}
.layout-col {
  height: calc(100% - 10px);
}

.left-col .resize-bar{
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
}
.right-col{
  flex: 1 1 200px;
}
.left-col.left-hide {
  display: none;
}

.switch-icon{
  font-size: 16px;
  color: rgba(20, 76, 169, .4);
  cursor: pointer;
  display: block;
  position: absolute;
  left: 14px;
  top: 19px;
}
.switch-icon:hover{
  color: rgba(20, 76, 169, 1);
}

</style>
